<template>
    <div v-if="sendStatus!=='success'" class="sendStatusStyle">
        <chat-info-loading v-if="sendStatus === 'sending'" />
        <img v-if="sendStatus === 'failed'" src="../im-static/images/chat/send_fail.png" class="chat-info-loading-common" :click="resendMsgEvent" :data-resend-index="index" />
        <chat-info-loading v-if="sendStatus=='loading'" />
    </div>
</template>

<script lang="ts">
import chatInfoLoading from './chat-info-loading.vue';   
export default {
    name: 'chat-info-send-status',
    components: {
        chatInfoLoading
    },
    props: {
        sendStatus: {
            type: String,
            default: 'success'
        },
        index: {
            type: Number,
            default: 0
        },
        resendMsgEvent: {
            type: Function,
            default: () => {}
        }
    }
}
</script>

<style scoped>
.sendStatusStyle {
    height: 100%;
    display: flex;
    align-self: center;
    width: 10%;
}
</style>
